<template>
  <div class="single-stat-container">
    <el-row
      v-loading="loading"
      :element-loading-text="loadingText"
      :element-loading-spinner="loadingSpinner"
      type="flex"
      align="middle"
      justify="space-around"
      class="overview stat-row"
    >
      <div class="item">
        <div class="title">领取次数</div>
        <div class="number"> <count-roll :number="statData.receive_count" /></div>
      </div>
      <div class="item">
        <div class="title">使用次数</div>
        <div class="number"> <count-roll :number="statData.used_count" /></div>
      </div>
      <div class="item">
        <div class="title">过期数量</div>
        <div class="number"> <count-roll :number="statData.expire_count" /></div>
      </div>
    </el-row>
    <div class="stat-row">
      <!--趋势图 start-->
      <trend :ticket-id="ticketId" :coupon-id="couponId" />
      <!--趋势图 end-->
    </div>
    <div class="stat-row">
      <data-list :ticket-id="ticketId" :coupon-id="couponId" />
    </div>
  </div>
</template>

<script>
import Trend from './charts/Trend'
import DataList from './table'
import CountRoll from '@/pages/data/components/count_roll';

export default {
  name: 'Single',
  components: {
    Trend,
    DataList,
    CountRoll
  },
  props: {
    ticketId: {
      type: [String, Number],
      default: 0
    },
    couponId: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      loadingText: '',
      loadingSpinner: '-',
      statData: {}
    }
  },
  watch: {
    ticketId() {
      this.loadStatData()
    },
    couponId() {
      this.loadStatData()
    }
  },
  created() {
    this.loadStatData()
  },
  methods: {
    loadStatData() {
      this.loading = true
      if (!this.ticketId) {
        this.loadingText = '数据出错'
        return;
      }
      this.loadingSpinner = 'el-icon-loading'
      this.loadingText = '数据加载中'

      // 参数
      const params = {
        ticket_id: this.ticketId,
        coupon_id: this.couponId
      }
      // 获取数据
      this.$http.get(
          '/admin/data/ticket/survey',
          params,
          ({ data }) => {
              this.statData = data
              this.loading = false
          },
          ({ msg }) => {
            this.loadingText = msg
          },
          false
      )
    }
  }
}
</script>

<style scoped lang="scss">
.single-stat-container{
  .stat-row{
    margin-top: 20px;
    &:first-child{
      margin-top: 0;
    }
  }
  .overview{
    height: 150px;
    border-radius: 10px;
    border: 1px solid #D8DCE6;
    .item{
      height: 70px;
      width: 33.33%;
      padding-left: 100px;
      border-right: 1px solid #D8DCE6;
      &:first-child{
        padding-left: 80px;
      }
      .title{
        margin-top: 6px;
        font-size: 13px;
        color: #333333;
        font-weight: 400;
      }
      .number{
        margin-top: 14px;
        font-size: 30px;
        font-weight: bold;
        color: #333333;
      }
    }
  }
}
</style>
